<template>
	<view>
		<!-- <image class="header-image" src="../../static/image/002.jpg" mode=""></image> -->
		<u-swiper :list="bannerList" interval="10000"  height="205" radius="0" imgMode="scaleToFill"></u-swiper>
		<view class="padding-30">
			<!-- 功能区 -->
			<view class="bg-fff border-radius20 padding-20 flex-flex-warp">
				<view class="flex-justAliCenter-column index-cate-item margin-bottom30" v-for="(item,index) in list"
					:key="index" @click="goToUrl(item.name,item.path)">
					<image class="img-100 margin-bottom20" style="border-radius: 50%;" :src="item.image" mode="">
					</image>
					<view class="fontSize-12 color-333">{{item.name}}</view>
				</view>
			</view>
			<!-- 商品标题 -->
			<view class="flex-between margin-30-0"
				@click="$tools.navigateTo('/pages/index/index-list/curriculum-list')">
				<view class="fontSize-16 color-000 fontWeight-bold">课程推荐</view>
				<view class="flex-alignItems-center">
					<view class="fontSize-13 color-808080 margin-right10">全部</view>
					<u-icon name="arrow-right" color="#808080" size="16"></u-icon>
				</view>
			</view>
			<!-- 商品列表 -->
			<!-- <goodsItem :list="goodsList" @click="goToDetail"></goodsItem> -->
			<view class="shopping-list">
				<view class="shopping-item" v-for="(item,index) in goodsList" :key="index" @click="goToDetail(item)">
					<image class="shopping-item-image" :src="item.image"></image>
					<view class="shopping-item-text">{{item.title}}</view>
					<!-- <view class="shopping-item-text1">{{item.describes}}</view> -->
					<view class="flex-between margin-top20">
						<view class="shopping-item-price" v-if="item.goods_type==2">积分:<text style="font-size: 38rpx;">{{item.gift_score}}</text></view>
						<view class="shopping-item-price" v-else>￥<text style="font-size: 38rpx;">{{item.price}}</text></view>
						<view class="buy-Item flex-center">购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsItem from "@/components/goods/goods.vue"
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				list: [{
						name: '太极鞋服',
						image: 'https://wudang.chunchuangkeji.cn/image/01.png',
						path: '/pages/shop/shop'
					},
					{
						name: '养生艾灸',
						image: 'https://wudang.chunchuangkeji.cn/image/02.png',
						path: '/pages/shop/shop'
					},
					{
						name: '教学视频',
						image: 'https://wudang.chunchuangkeji.cn/image/03.png',
						path: ''
					},
					{
						name: '教学地点',
						image: 'https://wudang.chunchuangkeji.cn/image/04.png',
						path: '/pages/index/index-list/store-list'
					},
					{
						name: '课程报名',
						image: 'https://wudang.chunchuangkeji.cn/image/05.png',
						path: '/pages/index/index-list/curriculum-list'
					},
					{
						name: '会员签到',
						image: 'https://wudang.chunchuangkeji.cn/image/06.png',
						path: '/pages/index/index-list/sign-in'
					},
					{
						name: '会员积分',
						image: 'https://wudang.chunchuangkeji.cn/image/07.png',
						path: '/pages/index/index-list/integral'
					},
					{
						name: '会员礼遇',
						image: 'https://wudang.chunchuangkeji.cn/image/08.png',
						path: '/pages/index/score-list/score-shop'
					},
					{
						name: '武当资讯',
						image: 'https://wudang.chunchuangkeji.cn/image/09.png',
						path: '/pages/news/news'
					},
					{
						name: '创业服务',
						image: 'https://wudang.chunchuangkeji.cn/image/10.png',
						path: '/pages/news/news'
					}
				],
				goodsList: [],
				baseUrlImage: '',
				bannerList:[]
			}
		},
		onLoad() {

		},
		onShow() {
			this.getIndexGoods()
		},
		methods: {
			// 跳转商品详情
			goToDetail(item){
				if(item.goods_type == 3){
					this.$tools.navigateTo('/pages/index/index-list/goods-info?goods_id='+item.id)
				}else if(item.goods_type == 1){
					this.$tools.navigateTo('/pages/shop/shop-goods-info?goods_id='+item.id)
				}else if(item.goods_type == 2){
					this.$tools.navigateTo('/pages/shop/shop-goods-info?goods_id='+item.id+'&pathCode=积分商城')
				}else if(item.goods_type == 4){
					this.$tools.navigateTo('/pages/auspiciousness/taoist-goods-info?goods_id='+item.id)
				}else if(item.goods_type == 5){
					this.$tools.navigateTo('/pages/index/score-list/discount-goods-info?goods_id='+item.id+'&pathCode=折扣商城')
				}
			},
			// 跳转
			goToUrl(name, path) {
				if (name == '太极鞋服' || name == '养生艾灸' || name == '武当资讯' || name == '创业服务') {
					return this.$tools.switchTab(path)
				}
				this.$tools.navigateTo(path)
			},
			// 获取首页内容
			async getIndexGoods() {
				let res = await this.$http.post(this.$api.index_goods, {
					page: 1,
					limit: 20
				}, {
					token: true
				})
				this.bannerList = res.data.banner
				this.goodsList = res.data.goods.map(item=>{
					return{
						id:item.id,
						image: item.image,
						title: item.title,
						price: item.price,
						gift_score:item.gift_score,
						goods_type:item.goods_type
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-Item{
		width: 98rpx;
		height: 48rpx;
		background: #967C5E;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
	}
	.shopping-item-price {
		font-weight: 400;
		font-size: 26rpx;
		color: #FE3232;
		// margin-top: 20rpx;
	}
	
	.shopping-item-text1 {
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		margin: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	
	}
	
	.shopping-item-text {
		font-weight: 500;
		font-size: 15px;
		color: #333333;
		margin: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	
	}
	
	.shopping-item-image {
		width: 325rpx;
		height: 325rpx;
		background: #EBF4FF;
		border-radius: 14rpx 14rpx 0rpx 0rpx;
		flex-shrink: 0;
	}
	.shopping-item:nth-child(2n){
		margin-right: 0;
	}
	.shopping-item {
		width: 46%;
		padding: 10rpx;
		background-color: #ffffff;
		border-radius: 14rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 0 2% 30rpx 0;
	}
	.shopping-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		// margin-top: 30rpx;
	}
	.index-cate-item {
		width: 20%;
		// margin-right: 5rpx;
	}

	.header-image {
		width: 100%;
		height: 400rpx;
		flex-shrink: 0;
	}
</style>